<template>
  <k-form-modal
    drawer
    width="649px"
    title="赠送兑换码"
    label-width="80px"
    v-bind="formModalState"
    v-on="formModalEvent"
  >
    <el-form-item label="会员类型" prop="vip_level">
      <el-radio-group v-model="state.model.vip_level">
        <el-radio v-for="item in levelType" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="团队人数">
      <div>1 人</div>
    </el-form-item>
    <el-form-item label="会员时长" prop="days">
      <el-radio-group v-model="state.model.days">
        <el-radio v-for="item in durationOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="有效期" prop="valid_time">
      <el-radio-group v-model="state.model.valid_time">
        <el-radio v-for="item in validDateOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
  </k-form-modal>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { levelOptions, validDateOptions, durationOptions } from '../hooks/use-table';
import { useFormModal } from '@crud/index';
import { giftExchangeCode } from '@/api/crm-kgj/user';

const emits = defineEmits(['after-submit']);
const formRef = ref();
const levelType = computed(() => levelOptions.slice(1, 2));
const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  formRef,
  model: {
    vip_level: 20,
    days: 1,
    valid_time: 1
  },
  getParams: (model) => model,
  onShow: (mode = 0, data: any) => {
    state.model = { ...state.model, user_id: data.user_id };
  },
  onSubmit: async (model, mode = 0) => {
    const res = await giftExchangeCode(model);
    if (!res.err) {
      ElMessage.success('兑换码赠送成功');
      emits('after-submit');
    }
    return res;
  }
});

defineExpose({
  show: methods.show
});
</script>
